<script setup>
import { ref,onMounted } from 'vue'
import { queryWarehouse,addWarehouseApi,queryWarehouseById,updateWarehouse,deleteWarehouse } from '../../api/warehouse'
import { queryAllCityApi } from '../../api/city'
import { ElMessage } from 'element-plus'

//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({name:'',cityId:[],address:'',personChargeName:'',status:''})

// 城市数据
const cityOptions = ref([])
// 获取城市数据
const getCityData = async () => {
  const result = await queryAllCityApi()
  if (result.code) {
    cityOptions.value = result.data
  }
}
const cityProps = {value:'id',label:'name',children:'children'}

//添加仓库的点击事件
const saveWarehouse = () => { 
  title.value = '添加仓库'
  dialogShow.value = true
  //清空表单数据
  dialogData.value = {name:'',cityId:[],address:'',personChargeName:'',status:''}
}
//保存的点击事件
const saveWarehouseInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改仓库信息
    result = await updateWarehouse(dialogData.value)
  }else{
    //添加仓库信息
    result = await addWarehouseApi(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}
//回显查询数据
const edit = async (id)=>{
  title.value = '修改仓库'
  dialogShow.value = true
  const result = await queryWarehouseById(id) 
  dialogData.value = result.data
}
//删除仓库
const deleteById = async (id)=>{
  const result = await deleteWarehouse(id) 
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//定义表单数据
const warehouseDate = ref({ name: '', cityName: '',personChargeName: ''})
//定义taable表格的数据
const warehouseList = ref([])
//定义查询的点击事件
const query = async () => { 
  const result = await queryWarehouse(page.value,pageSize.value,warehouseDate.value.name,warehouseDate.value.cityName,warehouseDate.value.personChargeName)
  warehouseList.value = result.data.rows
  total.value = result.data.total
}
//定义清空表单的点击事件
const clear = () => { 
  warehouseDate.value = { name: '', cityName: '',personChargeName: ''}
  query()
}
//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
//挂载
onMounted(() => {
  query()
  getCityData()
})
</script>
<template>
<div><h4>仓库管理</h4></div>
<div>
  <el-form :inline="true" :model="warehouseDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveWarehouse"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseDate.name" placeholder="请输入仓库名称" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseDate.cityName" placeholder="所在城市" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseDate.personChargeName" placeholder="请输入负责人" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="warehouseList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="80"/>
    <el-table-column prop="name" label="仓库名称" align="center"  width="200"/>
    <el-table-column prop="cityName" label="所在城市" align="center" width="120"/>
    <el-table-column prop="address" label="详细地址" align="center" width="200"/>
    <el-table-column prop="personChargeName" label="负责人" align="center" width="150"/>
    <el-table-column prop="createBy" label="创建人" align="center" width="150"/>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column label="是否有效" align="center" width="100">
      <template #default="scope">
        <el-tag :type="scope.row.status==1?'success':'danger'">{{ scope.row.status == 1 ? '有效' : '无效' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center" width="120">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>

<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500" align-center>
    <el-form :model="dialogData">
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.name" placeholder="请输入仓库名称" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-cascader
          v-model="dialogData.cityId"
          :options="cityOptions"
          :props="cityProps"
          placeholder="请选择所在城市"
          clearable/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.address" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.personChargeName" placeholder="请输入负责人" />
      </el-form-item>
      <el-form-item label="是否有效" prop="status">
        <el-switch v-model="dialogData.status" :active-value="1" :inactive-value="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default">取消</el-button>
      <el-button type="primary" @click="saveWarehouseInfo">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>